<template>
  <div class="page-container">
    <header v-if="showH">
      <i v-if="showHome"   class="home" @click="$router.push('/home')"
        >&#xe71a;</i
      >
      <i v-if="showBack" class="back" @click="$router.go(-1)"><van-icon  color="#333" name="arrow-left" /></i>
      <span>{{ title }}</span>
      <!-- 触发newEvt事件--自定义事件 -->
      <i v-if="showNew" class="new" @click="$emit('newEvt')">&#xe889;</i>
    </header>
    <article>
      <slot />
    </article>
    <van-tabbar v-if="showD" route class="a1" v-model="active" active-color="#f56e00">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="eye-o" to="/hall">大厅</van-tabbar-item>
      <van-tabbar-item icon="records" to="/list">列表</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  props: {
    /**
     * 布局组件的标题
     */
    title: {
      type: String,
      default: "",
    },
    showHome: {
      type: Boolean,
      default: true,
    },
    showBack: {
      type: Boolean,
      default: false,
    },
    showNew: {
      type: Boolean,
      default: false,
    },
    showH: {
      type: Boolean,
      default: true,
    },
    showD: {
      type: Boolean,
      default: false,
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
@import "../style/common.less";

.page-container {
  display: block;
  position: relative;
  height: 100%;
  > header {
    display: block;
    position: relative;
    height: 48px;
    line-height: 48px;
    font-size: 0.9rem;
    text-align: center;
    color: @c1;
    background-color: #fff;
    border-bottom: solid 1px rgb(224, 219, 219);
    .clear();
    > i {
      float: left;
      position: relative;
      width: 48px;
      height: 48px;
      .nuolai-ft(1.4rem, @cf);
      text-align: center;
      line-height: 48px;
      z-index: 10;
      &.new {
        float: right;
      }
    }
    > span {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  }
  > article {
    display: block;
    height: calc(100% - 48px);
    overflow-x: hidden;
  }
}
.a1 {
  font-weight: 700;
}
</style>